<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta content="telephone=no" name="format-detection">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            padding: 20px;
        }

        h1 {
            text-align: center;
            padding: 8px 0;
        }

        h2 {
            padding: 15px 0;
        }

        .h3 {
            padding-bottom: 10px;
        }

        p {
            padding: 10px 0;
        }

        strong {
            display: block;
            padding: 15px 0;
        }

        dt {
            padding: 10px 0;
        }

        dd p, dd li {
            text-indent: 2em;
        }

        .sign {
            text-align: center;
        }

        .sign a {
            display: inline-block;
            margin: 0 20px;
        }

        .pis-re {
            position: relative;
        }

        .pis-ab {
            position: absolute;
        }

        .sign-footer img {
            width: 200px;
            top: 0;
            left: 80px;
        }

        .jiafang, .yifang{height: 100px;}

        u{
            margin: 0 4px;
            font-size: 14px;
        }

        .text{
            width: 50px;
            border: none;
            border-bottom: #000 1px solid;
            outline: none;
            margin: 0 4px;
            padding: 0 2px;
            text-align: center;
            font-size: 14px;
        }
        input[disabled]{background: none;}

        #save{
            display: block;
            border: none;
            width: 50%;
            line-height: 40px;
            border-radius: 5px;
            background: #5cadff;
            color: #fff;
            margin: 0 auto;
            outline: none;
        }
    </style>
</head>
<body>
<div>
    <h1>上 岗 协 议</h1>
    <p>
        甲方姓名（雇主）：<span id="userName"></span>
        <br>
        身份证号码：<span id="userIDCards"></span>
        <br>
    </p>
    <p>
        乙方姓名（雇员）：<span id="workName"></span>
        <br>
        身份证号码：<span id="workerIDCards"></span>
        <br>
    </p>
    <p>
        地址：<span id="address"></span>
    </p>
    <div>
        <strong>为满足参与者需求，甲、乙双方在平等、自愿的基础上，经协商一致同意签订本合同。由乙方对甲方提供家政服务、甲方支付劳务费订立家政劳务合同：</strong>
        <ul>
            <li>
                一、合同期限：自<u id="thisYear"></u>年<u id="thisMonth"></u>月<u id="thisDate"></u>日至<input class="text" id="targetYear" type="number" onchange="changeYear()" placeholder="请输入">年<input class="text" id="targetMonth" type="number" onchange="changeMonth()" placeholder="请输入">月<input class="text" id="targetDate" type="number" onchange="changeDate()" placeholder="请输入">日止。
            </li>
            <li>
                二、 由甲、乙双方商定以下乙方到甲方做家政的《上岗协议》内容：
                <p>
                    乙方从 年 月 日到 年 月 日起，
                    自愿到甲方家工作，工作地址<u id="workAddress"></u>，吃住全包，月休息俩天（不包括晚上，晚上必须在甲方家里），（注明：俩天假期必须通过双方协商后再定）,乙方可以把每个月休息日累计起来等到假期或者有事情的时候休息，乙方除了休息日外，
                    其他时间不能请假，影响雇主正常的生活。国定假日不可休息。工资<u id="totalAmount"></u>，每个月15号发放前个月的工资。
                </p>
            </li>
            <li>
                三、证件：
                <p>
                    1、乙方、甲方均出示的是本人正确身份证和有效证明。
                </p>
                <p>
                    2、乙方出示有效、真实的体检合格证明，体检内容要有：胸透正常、无心脏病、无高血压、肝功能2对半正常、无各种传染病等。
                </p>
            </li>
        </ul>
    </div>
    <h2>一、乙方的义务和权利：</h2>
    <dl>
        <dt class="h3">(一)义务</dt>
        <dd>
            <p>
                自愿签定合同：乙方愿意到甲方家为其做家政服务，自愿签订此合同。
            </p>
            <p>
                提供有效内容,符合合同的体检证明；
            </p>
            <p>
                完全依照双方订立的本合同内容的要求进行家政工作。
            </p>
        </dd>
        <dt>
            2、财产和生命安全：
        </dt>
        <dd>
            <p>
                如属乙方不慎毁坏客户物品的，乙方应照价赔偿；乙方自身因没有（或没有要求甲方合理的）采用必要的安全的措施，而造成乙方或甲方生命及财产的损失，一切后果与甲方无关，乙方自己承担。乙方在带小孩的工作过程中，特别要注意安全，有意或无意造成孩子的伤或亡，一切后果有乙方负责；
            </p>
            <p>
                乙方在工作期间内应当注意防火、防盗、防煤气中毒的恶性事件的发生，以保护自己和雇主的人身安全、财产安全和他人的人身、财产安全。如乙方疏忽或违规操作，而对甲方造成严重后果者，乙方在经济上要予以实际损失额赔偿给甲方，法律上应予以追究。
            </p>
        </dd>
        <dt>
            3、纪律
        </dt>
        <dd>
            <ul>
                <li>
                    乙方未经甲方的同意，不得使用甲方的电话、化妆品、衣物、家电用品等属甲方的东西；如有违反，乙方愿意以原物品的2倍赔偿给甲方；
                </li>
                <li>
                    乙方不得未经甲方同意向他人泄露甲方的家庭人事情况、经济状况、家庭矛盾、工作或学习的内容和地址、电话号码、住址、身份及隐私等等的家庭信息；乙方不得搬弄是非。乙方如果有违反，愿意甲方向其追回全额的经济损失；
                </li>
                <li>
                    乙方未经甲方同意，任何时间不得带任何人进入甲方的住址和工作、学习的地点乙方如果有违反，愿意甲方向其追回全额的经济损失；
                </li>
            </ul>
        </dd>
        <dt class="h3">
            （二）权利
        </dt>
        <dd>
            <ul>
                <li>
                    1、乙方在工作期间应当爱护甲方的家庭财产，对贵重易碎、易损物品及危险动作的清洁，应当首先采取安全保护措施，也有权要求客户提供安全保护措施，方可小心进行清洁工作。
                </li>
                <li>
                    2、乙方有权在双方约定的发薪时间，向甲方催讨当月的工资
                </li>
            </ul>
        </dd>
    </dl>
    <h2>二、甲方的权利和义务：</h2>
    <dl>
        <dt class="h3">
            (一)义务
        </dt>
        <dd>
            <ul>
                <li>
                    甲方在合同期间，乙方除了请假、矿工或损毁甲方物件及合同中约定款项，按合同照扣服务费外，不满意乙方服务可同乙方沟通、协调直至甲方可单方面立即终止本合同，但不可克扣乙方的服务费
                    ，甲方不得以乙方服务不到位为借口克扣甲方服务费，甲方如以此为由而克扣甲方服务费，则属甲方违约。
                </li>
                <li>
                    甲方有责任对贵重的易碎物品或其他，在采取安全措施的情况下，指令乙方进行工作。
                </li>
                <li>
                    甲方有责任对其贵重的财、物实施严格的保管。
                </li>
            </ul>
        </dd>
        <dt class="h3">
            （二）权利
        </dt>
        <dd>
            <ul>
                <li>
                    乙方在工作期间，对甲方家庭内的贵重物品，不得擅自触摸，更不得窃为己有。如触犯刑律的，甲方有权将配合公安局要求国家执法部门立案，并追加实际经济损失的2倍要求乙方予以赔偿。
                </li>
                <li>
                    甲方有权在乙方的工作内，在地点、时间不变的情况下，指令乙方的工作顺序、要求等方面的安排；
                </li>
                <li>
                    有权在任何时间终止本合同；有权了解乙方的家庭人员情况和乙方的社会关系；
                </li>
            </ul>
        </dd>
    </dl>
    <h2>
        三、双方的违约责任
    </h2>
    <ul>
        <li>
            甲方、乙方双方，应遵守本合同订立的内容和要求，如有违反，也应以本合同订立的制约方法进行；
        </li>
        <li>
            双方如遇到矛盾，应尽力协商和谦让；
        </li>
        <li>
            如遇在本合同未详尽事宜，双方在予以协商；
        </li>
        <li>
            双方有纠纷，协商不成或者单方无理由的情况下解除合同，可到甲方的所在地人民法院予以起诉，赔偿对方损失。
        </li>
    </ul>
    <h2>
        此合同系双方自愿订立。一式俩份，甲、乙、各执一份。签名、或盖章有效。
    </h2>

    <div class="sign-footer ">
        <div class="jiafang pis-re">
            甲方签名：
            <br>
            联系电话：<span id="userMobile"></span>
            <br>
            日期：
            <img class="pis-ab" id="jf-sign" src="" data-status="none">
        </div>
        <div style="height: 20px;"></div>
        <div class="yifang pis-re">
            乙方签名：
            <br>
            联系电话：<span id="workMobile"></span>
            <br>
            日期：
            <img class="pis-ab" id="yf-sign" src="" data-status="none">
        </div>
    </div>
    <div style="height: 20px;"></div>
    <div class="sign">
        <a id="jf-link" href="demo.html">
            甲方签名
        </a>
        <a id="yf-link" href="demo2.html">
            乙方签名
        </a>
    </div>
    <div style="height: 20px;"></div>
    <div>
        <button id="save">保存</button>
    </div>
</div>

<script>
    urlinfo=window.location.href; //获取当前页面的url
    len=urlinfo.length;//获取url的长度
    offset=urlinfo.lastIndexOf("?");//设置参数字符串开始的位置
    newsidinfo=urlinfo.substr(offset + 1,len)//取出参数字符串 这里会获得类似“id=1”这样的字符串
    newsids=newsidinfo.split("=");//对获得的参数字符串按照“=”进行分割

    var jfSign = localStorage.getItem('jf-sign'),
        yfSign = localStorage.getItem('yf-sign'),
        signStatus = 0,
        orderId = 0,
        contractId = 0;
    if(jfSign != null){
        $('jf-sign').setAttribute("data-status","ok");
        $('jf-sign').src = jfSign;
    }
    if(yfSign != null){
        $('yf-sign').setAttribute("data-status","ok");
        $('yf-sign').src = yfSign;
    }
    //$('jf-sign').src = jfSign;
    //$('yf-sign').src = yfSign;

    function  changeYear(){
        let year = $("targetYear").value;
        localStorage.setItem('endYear', year );
    }

    function  changeMonth(){
        let month = $("targetMonth").value;
        localStorage.setItem('endMonth', month );
    }

    function  changeDate(){
        let  date = $("targetDate").value;
        localStorage.setItem('endDate', date );
    }

    if (localStorage.getItem('endYear' )) {
        $("targetYear").value = localStorage.getItem('endYear')
    }
    if (localStorage.getItem('endMonth' )) {
        $("targetMonth").value = localStorage.getItem('endMonth')
    }
    if (localStorage.getItem('endDate' )) {
        $("targetDate").value = localStorage.getItem('endDate')
    }

    var province,city,district,street;
    function loadXMLDoc() {
        var _this = this;
        var xmlhttp;
        var data;
        var id = 4;
        $("thisYear").innerHTML = new Date().getFullYear();
        $("thisMonth").innerHTML = new Date().getMonth()+1;
        $("thisDate").innerHTML = new Date().getDate();
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                data = JSON.parse(xmlhttp.responseText);
                signStatus = data.content.contractStatus;
                if(signStatus == 0){
                    $("yf-link").style.display = 'none';
                }
                hideSign(signStatus);
                orderId = data.content.id;
                province = data.content.province;
                city = data.content.city;
                district = data.content.district;
                street = data.content.address;
                $("workAddress").innerHTML = data.content.province + data.content.city + data.content.district;
                $("address").innerHTML = data.content.province + data.content.city + data.content.district;
                $("totalAmount").innerHTML = data.content.orderAmount;
                $("userName").innerHTML = data.content.userName;
                $("workName").innerHTML = data.content.workName;
                $("userIDCards").innerHTML = data.content.userIDCards;
                $("workerIDCards").innerHTML = data.content.workerIDCards;
                $("userMobile").innerHTML = data.content.userMobile;
                $("workMobile").innerHTML = data.content.workMobile;
            }
        }
        xmlhttp.open("POST", "https://api.xinbangpeixun.com/admin/order/getorderDetail", true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send('id=' + orderId);
    }

    //甲方已签名
    function getXMLDoc() {
        var _this = this;
        var xmlhttp;
        var data;

        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                data = JSON.parse(xmlhttp.responseText);
                signStatus = data.content.contractStatus;
                if(signStatus == 0){

                }else if(signStatus == 1){  // 甲方签名
                    $('jf-sign').setAttribute("data-status","ok");
                    //$('yf-sign').setAttribute("data-status","ok");

                    $('jf-sign').src = data.content.userSign;
                    $("yf-link").style.display = 'block';
                    //$('yf-sign').src = data.content.contract.workSign;
                }else{
                    $("yf-link").style.display = 'none';
                    $("save").style.display = 'none';

                    $('jf-sign').setAttribute("data-status","ok");
                    $('yf-sign').setAttribute("data-status","ok");

                    $('jf-sign').src = data.content.userSign;
                    $('yf-sign').src = data.content.workSign;
                }

                $("thisYear").innerHTML = data.content.startYear;
                $("thisMonth").innerHTML = data.content.startMonth;
                $("thisDate").innerHTML = data.content.startDay;
                $("targetYear").value = data.content.endYear;
                $("targetMonth").value = data.content.endMonth;
                $("targetDate").value = data.content.endDay;

                hideSign(2);
                orderId = data.content.id;
                province = data.content.province;
                city = data.content.city;
                district = data.content.district;
                street = data.content.street;
                // $("workAddress").innerHTML = data.content.province + data.content.city + data.content.district + data.content.street;
                $("workAddress").innerHTML = data.content.province + data.content.city + data.content.district;
                $("address").innerHTML = data.content.province + data.content.city + data.content.district + data.content.street;
                $("totalAmount").innerHTML = data.content.totalAmount;
                $("userName").innerHTML = data.content.userName;
                $("workName").innerHTML = data.content.workName;
                $("userIDCards").innerHTML = data.content.userIDCards;
                $("workerIDCards").innerHTML = data.content.workerIDCards;
                $("userMobile").innerHTML = data.content.userMobile;
                $("workMobile").innerHTML = data.content.workMobile;
            }
        }
        xmlhttp.open("POST", "https://api.xinbangpeixun.com/admin/order/getContractDetail", true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send('contractId=' + contractId);
    }

    if(location.search.indexOf('contractId') != -1 ) {
        contractId =  newsids[1];
        localStorage.setItem('contractId', contractId);
        getXMLDoc();
    }

    if(location.search.indexOf('orderId') != -1 ) {
        orderId = newsids[1];
        localStorage.setItem('orderId', orderId);
        loadXMLDoc();
    }


    function $(str) {
        return document.getElementById(str);
    }

    $("save").onclick = function () {
        var targetYear = $("targetYear").value,
            targetMonth = $("targetMonth").value,
            targetDate = $("targetDate").value;


        if($("jf-sign").getAttribute("data-status") == "none" && signStatus == 0){
            alert("请在签名之后再保存");
            return;
        }

        if($("yf-sign").getAttribute("data-status") == "none" && signStatus == 1){
            alert("请在签名之后再保存");
            return;
        }

        if(targetYear > 9999 || targetYear < $("thisYear").innerHTML){
            alert("请输入正确的年份");
            return;
        }
        if(targetMonth > 12 || targetMonth < 0){
            alert("请输入正确的月份");
            return;
        }
        if(targetDate > 31 || targetDate < 0){
            alert("请输入正确的日期");
            return;
        }


        if(confirm("确认保存吗，保存后将不可修改")){
            hideSign(1);

            var dataJson = {
                userName: $("userName").innerHTML,
                workName: $("workName").innerHTML,
                userMobile: $("userMobile").innerHTML,
                workMobile: $("workMobile").innerHTML,
                startYear: $("thisYear").innerHTML,
                startMonth: $("thisMonth").innerHTML,
                startDay: $("thisDate").innerHTML,
                endYear: $("targetYear").value,
                endMonth: $("targetMonth").value,
                endDay: $("targetDate").value,
                totalAmount: $("totalAmount").innerHTML,
                province: province,
                city: city,
                district: district,
                street: street,
                userIDCards: $("userIDCards").innerHTML,
                workerIDCards: $("workerIDCards").innerHTML,
                orderId: orderId
            }
            //if(signStatus == 0){
            dataJson.userSign = $("jf-sign").src;
            dataJson.contractStatus = 1;
            if(signStatus == 1){
                dataJson.workSign = $("yf-sign").src;
                dataJson.contractStatus = 2;
            }
            //}
            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            } else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var data = JSON.parse(xmlhttp.responseText);
                    if(data.status == 1){
                        alert("保存成功")
                        localStorage.removeItem("endYear");
                        localStorage.removeItem("endMonth");
                        localStorage.removeItem("endDate");
                        localStorage.removeItem('jf-sign');
                        localStorage.removeItem('yf-sign');
                    } else {
                        alert(data.msg);
                    }
                }
            }
            xmlhttp.open("POST", "https://api.xinbangpeixun.com/admin/order/addContract", true);
            xmlhttp.setRequestHeader("Accept","application/json");
            xmlhttp.setRequestHeader("Content-Type","application/json");
            xmlhttp.send(JSON.stringify(dataJson));
        }else {

        }
    }

    function hideSign(status) {

        if(status == 0){

        }else if(status == 1){
            $("save").style.display = 'none';
            document.querySelector(".sign").style.display = "none";

        }else if(status == 2){

            $("jf-link").style.display = 'none';
        }
        var text = document.querySelectorAll(".text");
        for(let item = 0;item<text.length;item++){
            if(text[item].value && status == 2){
                text[item].disabled = true;
            }else{
                alert("未输入相关信息");
                text[item].focus();
                return;
            }
        }
    }
</script>
</body>
</html>